<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .classA {
      font-size: 25px;
    }

    .classB {
      background: #ccc;
    }

    .classC {
      color:aqua;
    }
  </style>
</head>
<body>
  <!-- 
    React的class写法
      <p class={hasA ? 'classA' : ''}>情况1</p>
      <p class={hasA ? 'classC classA' : 'classC'}>情况1</p>
   -->
  <div id="test">
    <!-- ○ 情况1: 当类名确定, 且只有一个, 只是不确定有没有时 => 三元表达式写法 -->
    <p :class="hasA?'classA':''">情况1</p>
    <!-- ○ 情况2: 当类名确定, 且有多个, 只是不确定有没有时 => 对象写法 -->
    <p :class="{classA: hasA}">情况2</p>
    <!-- ○ 情况3: 当类名只有一个, 类名不确定时 => 字符串写法 -->
    <p :class="myClass">情况3</p>
    <!-- ○ 情况4: 当类名有多个, 类名不确定时 => 数组写法 -->
    <p :class="myClass2">情况4</p>

    <!-- 动态class + 静态class 合并 -->
    <p class="classC" :class="myClass">动态class + 静态class</p>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#test',
      data: {
        hasA: true,
        myClass: 'classA',
        myClass2: ['classA', 'classB']
      }
    })

    setTimeout(() => {
      vm.hasA = !vm.hasA
      vm.myClass = 'classB'
      vm.myClass2 = ['classB', 'classC']
    }, 2000);
  </script>
</body>
</html>